<template>
  <div
      v-if="visible"
      class="context-menu"
      :style="{ left: x + 'px', top: y + 'px' }"
      @click.stop
      @contextmenu.stop
  >
    <ul>
      <li
          v-for="item in menuItems"
          :key="item.key"
          @click.stop="handleMenuClick(item.key)"
      >
        <el-icon v-if="item.icon" :color="item.color || ''">
          <component :is="item.icon" />
        </el-icon>
        <span>{{ item.label }}</span>
      </li>
    </ul>
  </div>

  <!-- 新增数据表对话框 -->
  <AddTableDialog
      ref="addTableDialogRef"
      @success="handleAddSuccess"
  />
  <!-- 删除数据表对话框 -->
  <DeleTableDialog
      ref="deleTableDialogRef"
      @success="handleDeleteSuccess"
  />
  <!-- 修改表信息对话框 -->
  <UpTableDialog
      :currentRow="currentRow"
      ref="upTableDialogRef"
      @success="handleUpSuccess"
  />
</template>

<script setup lang="ts">
import { ElIcon } from 'element-plus'
import { defineProps, defineEmits, onMounted, onUnmounted, ref } from 'vue'
import type { Component, Ref } from 'vue'

import AddTableDialog from '@/views/AddTableDialog.vue' // 假设对话框组件在这个路径
import { useTableService } from '@/api/Table/TableApi'
import DeleTableDialog from "@/views/DeleTableDialog.vue"; // 导入表格服务
import {TableData} from "@/views/DatabasePage.vue"
import {ElMessage} from "element-plus"
import UpTableDialog from "@/views/UpTableDialog.vue";

// 在组件中使用表格服务
const { deleteTable, loading: createLoading } = useTableService()

// 定义事件类型
const emit = defineEmits<{
  (e: 'action', key: string, payload?: any): void
  (e: 'close'): void
}>()

interface MenuItem {
  key: string
  label: string
  icon?: Component
  color?: string
}

const props = defineProps<{
  visible: boolean
  x: number
  y: number
  currentRow: TableData | null // 新增当前行数据prop
}>()

// 引用新增对话框组件
const addTableDialogRef = ref<InstanceType<typeof AddTableDialog> | null>(null)
// 引用删除对话框组件
const deleTableDialogRef = ref<InstanceType<typeof DeleTableDialog> | null>(null)
// 引用修改对话框组件
const upTableDialogRef = ref<InstanceType<typeof UpTableDialog> | null>(null)

// 菜单选项配置
const menuItems: MenuItem[] = [
  {
    label: '新增',
    key: 'add',
    color: 'primary',
  },
  {
    key: 'copy',
    label: '复制名称',
    color: '#409EFF'
  },
  {
    key: 'edit',
    label: '编辑',
    color: '#67C23A'
  },
  {
    key: 'delete',
    label: '删除',
    color: '#F56C6C'
  }
]

// 点击外部关闭菜单
const handleDocumentClick = (e: MouseEvent) => {
  if (props.visible) {
    // 判断点击目标是否为菜单内部元素
    const menu = document.querySelector('.context-menu')
    if (!menu?.contains(e.target as Node)) {
      emit('close')
    }
  }
}

// 组件挂载时添加事件监听，卸载时移除
onMounted(() => {
  document.addEventListener('click', handleDocumentClick)
})

onUnmounted(() => {
  document.removeEventListener('click', handleDocumentClick)
})

// 处理菜单点击
const handleMenuClick = (key: string) => {
  if (key === 'add') {
    addTableDialogRef.value?.open()
  } else if (key === 'copy') {
    // 复制名称
    emit('action', 'copy', props.currentRow?.tableName)
    ElMessage.success("复制成功")
  } else if (key === 'edit') {
    // 修改表信息
    upTableDialogRef.value?.open(props.currentRow?.tableId.toString())
  } else if (key === 'delete') {
    // 打开删除对话框
    deleTableDialogRef.value?.open(props.currentRow?.tableId)
  } else {
    emit('action', key)
  }
  emit('close') // 关闭菜单
}

// 处理新增成功
const handleAddSuccess = () => {
  emit('action', 'add')
}

// 处理删除成功
const handleDeleteSuccess = () => {
  emit('action', 'delete')
}

// 处理修改成功
const handleUpSuccess = () => {
  emit('action', 'up')
}
</script>

<style scoped>
.context-menu {
  position: fixed;
  z-index: 1000;
  width: 160px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 4px 0;
  overflow: hidden;
}

.context-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.context-menu li {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  transition: all 0.2s;
}

.context-menu li:hover {
  background-color: #f5f7fa;
  color: #409EFF;
}

.context-menu li :deep(.el-icon) {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}
</style>
